<template>
  <div>
    <pform ref="form" :model="form" >
      <el-form-item label="虚拟私有云">
        <div class="flex-c">
          <el-select size="small" class="w233 mr60" v-model="form.field1" placeholder="请选择虚拟私有云">
            <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select size="small" class="w233" v-model="form.field2" placeholder="请选择子网">
            <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div class="flex-c">
            <el-select size="small" class="w233 ml60" v-model="form.field3" placeholder="请选择IP分配方式">
              <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <div class="ml30">ip地址:</div>
            <el-input size="mini" class="w52" v-model="form.field4" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field5" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field6" disabled></el-input>·
            <el-input size="mini" class="w52" v-model="form.field7" placeholder="输入"></el-input>
          </div>
          <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right" @click="resetMor"></i>
          <div class="btntext" @click="createMOR">新建私有镜像</div>
        </div>
      </el-form-item>
      <el-form-item label="网卡">
        <div style="min-height: 120px;">
          <div class="flex-c">
            <pbtn class="mr15" @click="showCard=true"></pbtn>
            <div class="mr40">增加一块网卡</div>
            <pbtn class="mr15" @click="showHighCard=true"></pbtn>
            <div class=" mr20">增加一块高速网卡</div>
            <div class="explain">您还可以增加1块网卡、1块高速网卡</div>
          </div>
          <div>
            <div style="min-height: 40px;">
              <div class="flex-c" v-show="showCard">
                <pbtn class="mr15" @click="showCard=false" iname="minus"></pbtn>
                <el-select size="small" class="w233" v-model="form.morName" placeholder="请选择子网">
                  <el-option v-for="item in option1" :key="item.field8" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <div class="flex-c">
                  <el-select size="small" class="w233 ml60" v-model="form.field9" placeholder="请选择IP分配方式">
                    <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <div class="ml30">ip地址:</div>
                  <el-input size="mini" class="w52" v-model="form.field10" disabled></el-input>·
                  <el-input size="mini" class="w52" v-model="form.field11" disabled></el-input>·
                  <el-input size="mini" class="w52" v-model="form.field12" disabled></el-input>·
                  <el-input size="mini" class="w52" v-model="form.field13" placeholder="输入"></el-input>
                </div>
              </div>
            </div>
            <div class="flex-c" v-show="showHighCard">
              <pbtn class="mr15" @click="showHighCard=false" iname="minus"></pbtn>
              <el-select size="small" class="w233 mr60" v-model="form.field14" placeholder="请选择高速网卡">
                <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>

        </div>
      </el-form-item>
      <div class="form-br"></div>
      <el-form-item label="安全组">
         <div class="flex-c">
           <el-select size="small" class="w233" v-model="form.morType" placeholder="请选择安全组">
             <el-option v-for="item in option3" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <i style="font-size: 25px;margin:0 10px 0 30px;" class="el-icon-refresh-right"></i>
           <div class="btntext">新建安全组</div>
         </div>
       </el-form-item>
      <div class="form-br"></div>
      <el-form-item label="外部网络">
         <div class="red-text">无可用网络</div>
      </el-form-item>


      <el-form-item label="带宽类型">
        <el-radio-group v-model="form.field15">
          <el-radio label="独享带宽"></el-radio>
          <el-radio label="共享带宽"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="带宽">
        <div class="flex-c">
          <el-input-number size="small" style="width:215px" v-model="form.field16" :min="1" :max="300"></el-input-number>
          <div class="ml3 mr10">Mbit/s</div>
          <div class="explain">带宽上限300 Mbit/s</div>
        </div>
      </el-form-item>
    </pform>
  </div>
</template>

<script>
// import pform from '@/components/publicForm.vue'
  export default {
    // components:{pform},
    data() {
      return {
        showCard:false,
        showHighCard:false,
        form: {
          field1:'',
          field2:'',
          field3:'',
          field4:'198',
          field5:'21',
          field6:'21',
          field7:'',
          field8:'',
          field9:'',
          field10:'198',
          field11:'21',
          field12:'21',
          field13:'',
          field14:'',
          field15:'独享带宽',
          field16:'',
          field17:'',
          field18:'',
          field19:'',
        },
        // option1操作系统 option2操作系统 option3操作系统 option4操作系统
        option1:[
          {label:'vpc-default（192.168.0.0/16 ）',value:'CentOS'},
          {label:'vpc-defadsj（192.168.0.0/16 ）',value:'Ubuntu'},
          {label:'虚拟云名称（主网段）',value:'Windows'},
        ],
        option2:[
          {label:'自动分配IP',value:'CentOS'},
          {label:'手动分配IP',value:'Ubuntu'},
        ],
        option3:[
          {label:'Sys-FullAccess',value:'请选择镜像类别'},
          {label:'Sys-FullAccess',value:'操作系统'},
          {label:'安全组名称',value:'数据库与缓存'},
        ],
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      mirrorChange(val) {
        this.form.OS = ''
        this.form.OSType = ''
        this.form.morType = ''
        this.form.morName = ''
      },
      resetMor(){
        this.form.morType = ''
        this.form.morName = ''
      },
      // 新建镜像
      createMOR(){}
    }

  }
</script>

<style scoped lang="less">
.w52{
  margin: 0 3px;
  width:52px;
  /deep/.el-input__inner{
    padding: 0 8px 0 12px;
  }
}
</style>
